<template>
    <div class="box">
        <n-space vertical>
            <n-form
            ref="formRef"
            :model="model"
            label-placement="left"
            :label-width="160"
            class="setting-cont"
            >
            <n-form-item label="头像" path="uploadValue">
                <UploadImg v-model="model.avatar"></UploadImg>
            </n-form-item>
            <n-form-item label="账号" >
                <n-input v-model:value="model.username" placeholder="用户名" />
            </n-form-item>
            <n-form-item label="性别" path="selectValue" >
                <n-select
                v-model:value="model.gender"
                placeholder="Select"
                :options="options"
                />
            </n-form-item>
            <n-form-item label="手机" >
                <n-input v-model:value="model.phone" placeholder="手机号" />
            </n-form-item>
            <n-form-item label=" " >
                <n-button type="primary" size="medium" @click="handelsetting" block>提交设置</n-button>
            </n-form-item>
            
            </n-form>
        </n-space>
    </div>
 
</template>

<script setup>

import { ref } from 'vue';
import UploadImg from '../components/UploadImg.vue';
import { userUpdateApi } from '../api/user';
import { useAccount } from '../store/account';
const options = [
 {
    label: "女士",
    value: "1",
 },
 {
    label: "男士",
    value: "2",
 },
]
const account = useAccount()
const model = ref({
   username:account.userInfo.username,
   gender:account.userInfo.gender.toString(),
   phone:account.userInfo.phone,
   avatar:account.userInfo.avatar,
})
console.log('roleId',account.userInfo.roleId);

const formRef = ref(null);
const handelsetting= async ()=>{
   console.log(model.value);
   let {_id} = account.userInfo
   let res = await userUpdateApi(_id,model.value)
   if(res.data.code == 1) {
    //  account.userInfo = {...model.value}
    account.userInfo = {
        username:model.value.username,
        gender:model.value.gender,
        phone:model.value.phone,
        avatar:model.value.avatar
    }
   }
}
</script>

<style lang="scss" scoped>
.setting-cont{
    margin-right: 160px;
}
</style>